<template>
  <div>
    <div class="chat-box-msg" v-for="(item,index) in msgData" :key="index" :class="{'right':item.replyFlag}">
      <div class="chat-box-info">
        <span class="chat-name">{{item.orgName}}</span>
        <span class="chat-time pull-right">{{item.msgTime}}</span>
      </div>
      <img :src="item.src" class="chat-img"/>
      <div class="chat-text">{{item.msgContent}}<a v-if="item.fileName">{{item.fileName}}</a></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "chatMsg",
  props: {
    msgData: {
      type: Array,
      default: () => []
    }
  },
  methods: {

  }
};
</script>

<style lang="scss">
  .chat-box-msg{
    margin-top: 20px;
    padding: 0 35px;
  }

  .chat-box-info{
    display: block;
    margin-bottom: 2px;
    font-size: 15px;
  }

  .chat-name{
    font-weight: 600;
  }


  .chat-time{
    color: #999;
  }

  .pull-left{
    float: left;
  }

  .pull-right{
    float: right;
  }

  .chat-img{
    border-radius: 50%;
    float: left;
    width: 40px;
    height: 40px;
    vertical-align: middle;
  }
  .right .chat-img{
    float: right;
  }
  .chat-text{
    border-radius: 5px;
    position: relative;
    padding: 5px 10px;
    background: #d2d6de;
    border: 1px solid #d2d6de;
    margin: 5px 0 0 50px;
    color: #444;
  }
  .right .chat-text {
    background: #f39c12;
    border-color: #f39c12;
    color: #fff;
    margin-right: 50px;
    margin-left: 0;
  }
  .chat-text a{
    margin-left: 10px;
    color: red;
    font-size: 14px;
    font-weight: 600;
  }
</style>
